<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="card" v-if="!loading && dataList.length>0">
					<view class="item" v-for="(item1, index1) in dataList">
						<view class="box">
							<view class="title">
								<view class="text text-ellipsis">{{ item1.title }}</view>
							</view>
							<view class="desc text-ellipsis2">
								{{ item1.create_time }}
							</view>
						</view>
						<view class="title1">
							<view class="num1">{{ item1.money }}</view>
						</view>
					</view>
				</view>
				<view v-else>
					<wd-status-tip image="search" tip="无数据" />
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { ref, defineComponent } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { getAccountList } from "@/api/index.ts"
	import useDataLoad from '@/hooks/useDataLoad';
	export default defineComponent({
		name: 'CaseComponent',
		props: {
			// 定义props
		},
		setup(props, { attrs, slots, emit }) {
			const dataLoad = useDataLoad(getAccountList);
			onShow(() => {
				dataLoad.getData();
			})
			return {
				...dataLoad,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		// 样式定义
		padding: 20rpx 20rpx 160rpx; // 内边距
		width: calc(100% - 20rpx - 20rpx);

		.btn {
			position: fixed;
			width: calc(100% - 20rpx - 20rpx);

			left: 20rpx;
			bottom: 50rpx;

			.square {
				height: 100rpx !important;
			}
		}

		.card {
			overflow: hidden;
		}

		.item {
			padding: 40rpx;
			background: #ffffff;

			display: flex; // 设置flex布局，使icon和box在同一行显示
			align-items: center; // 使icon和box垂直居中
			justify-content: space-between; // 使icon和box水平分布，icon在box的右侧
			position: relative;

			&::after {
				content: '';
				display: inline-block;
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 1rpx;
				background: #eeeeee;
			}

			.box {
				width: 60%;
			}

			.title1 {
				width: 40%;
				text-align: right;

				.num1 {
					font-size: 35rpx;
					color: #c91c1f;
				}

				.num2 {
					font-family: PingFang;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
			}

			.title {
				font-family: PingFang;
				font-weight: 320;

				color: #000000;
				display: flex; // 设置flex布局，使checkbox和文字在同一行显示
				align-items: center; // 使checkbox和文字垂直居中

				.checkbox {
					// 设置checkbox的样式，使其与文字对齐
					margin-right: 10rpx; // 设置checkbox与文字之间的间距
				}

				.text {
					font-size: 28rpx;
					// 设置文字的样式，使其与checkbox对齐
				}
			}

			.desc {
				margin-top: 14rpx;
				font-family: PingFang;
				font-weight: 400;
				font-size: 25rpx;
				line-height: 36rpx;
				color: #999999;
			}
		}

		.item:nth-child(even) {
			// background: #f2f2f2;
		}
	}
</style>